<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <async-box></async-box>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {}
        },
        methods: {},
    })


    /*
        异步组件：是针对一些不确定什么时候需要显示的组件使用的，如一个组件是从服务器请求得到
        那么该组件我们无法确定什么时候可以请求结束，什么时候可以使用，或者是否能够请求成功
        也不知道，很多不确定的因素让我们不知道什么时候显示组件。那么这种情况我们就可以使用
        异步组件，只有数据请求成功了模板拿到了，才会调用成功显示组件。
        Vue.defineAsyncComponent 用来创建异步组件用的
    */

    app.component('async-box', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                const res = `<div> 该模板是来自于服务器请求 </div>`
                if (res) {
                    resolve({
                        template: res,
                        data() {
                            return {

                            }
                        },
                        methods: {},
                        computed: {}
                    })
                } else {
                    reject(400)
                }
            }, 2000);
        })
    }))

    const vm = app.mount('#app')
</script>

</html>